<template>
  <div>
    <!-- 固定：头像，打分，昵称，时间 -->
    <div>
      <img :src="defaultImage" alt="">
      <span>评论:{{ score }}分</span>
      <br>
      <span>昵称:{{ name }}</span>
      <br>
      <span>时间:{{ time }}</span>
    </div>
    <!-- 可变： -->
    <!-- 1.评论区 -->
    <div>
      <div style="flex:1;">{{ comment }}</div>
      <!-- 2.图片区 -->
      <!-- 一张图 -->
      <div v-if="imgs.length === 1" style="width:100px;display:inline-block;float:right;">
        <img width="100%" :src="imgs[0]" alt="">
      </div>
      <!-- 三张图 -->
      <div v-if="imgs.length > 1" style="display:flex;height:240px;">
        <img v-for="src in imgs" :key="src" style="flex:1" :src="src" alt="">
      </div>
      <!-- 3.神评 -->
      <div v-if="isShenPing" style="position:absolute;right:24px;top:24px;"><img src="pinglun.jpg" alt=""></div>
    </div>
    <el-button :style="{color:color}" :action="action" :icon="icon" :type="type" @click="done">{{ value }}</el-button>
  </div>
</template>

<script>
export default {
  props: {
    defaultImage: {
      type: Object || String,
      default: 'http://baidu.jpg'
    },
    score: {
      type: Number || String,
      default: '暂无'
    },
    name: {
      type: String,
      default: '匿名'
    },
    time: {
      type: String,
      default: '未知'
    },
    comment: {
      type: String,
      required: true
    },
    isShenPing: {
      type: Boolean,
      default: false
    },
    imgs: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      default: '确定'
    },
    type: {
      type: String,
      default: 'default'
    },
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#000'
    },
    action: {
      type: String,
      default: 'default'
    }

  },
  data() {
    return {
    //   defaultImage: 'http://baidu.jpg',
    //   score: 89.9,
    //   name: '南窑国际',
    //   time: '2022-06-20',
    //   comment: '这真是一条评论',
    //   isShenPing: true,
    //   imgs: ['http://baidu.jpg']
    //   list: [{ defaultImage: 'http://baidu.jpg',
    //     score: 89.9,
    //     name: '南窑国际',
    //     time: '2022-06-20',
    //     comment: '这真是一条评论',
    //     isShenPing: true,
    //     imgs: ['http://baidu.jpg'] }, { defaultImage: 'http://baidu.jpg',
    //     score: 89.9,
    //     name: '南窑国际',
    //     time: '2022-06-20',
    //     comment: '这真是一条评论',
    //     isShenPing: true,
    //     imgs: ['http://baidu.jpg'] }]
    }
  },
  methods: {
    done() {
      if (this.action === 'default') {
        return
      } else if (this.action === 'request') {
        console.log(this.action)
        this.$store.dispatch('user/getUserInfo')
      }
    }
  }
}
</script>

<style>

</style>
